<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{margin: 0;padding: 0;}
		.foot-bar{position: fixed; bottom: 0;width: 100%; height: 50px; background: #428BCA;vertical-align: middle;display: flex;display:-webkit-flex;}
		.foot-bar li{list-style: none; display: inline-block;color: #fff;text-align: center; flex: 1;-webkit-flex: 1;vertical-align: middle;}
		.foot-bar li a{display: inline-block;vertical-align: middle;}
		.foot-bar li i{height:100%; vertical-align: middle;display: inline-block;}
		.foot-bar li.menu_active{background: #000;}
		.animation{display: none;}
			.menu_active .animation{
				display: block;
				-webkit-animation:fadeInUpBig 0.5s .1s ease both;
				-moz-animation:fadeInUpBig 0.5s .1s ease both;}
				@-webkit-keyframes fadeInUpBig{
				0%{opacity:0;
				-webkit-transform:translateY(2000px)}
				100%{opacity:1;
				-webkit-transform:translateY(0)}
				}
				@-moz-keyframes fadeInUpBig{
				0%{opacity:0;
				-moz-transform:translateY(2000px)}
				100%{opacity:1;
				-moz-transform:translateY(0)}
			}
		</style>
	</head>

	<body>
	
	<ul class="foot-bar">
		<li class="menu_active"><a>默认文字<div class="animation">动画文字</div></a><i></i></li>
		<li><a>默认文字<div class="animation">动画文字</div></a><i></i></li>
		<li><a>默认文字<div class="animation">动画文字</div></a><i></i></li>
		<li><a>默认文字<div class="animation">动画文字</div></a><i></i></li>
		<li><a>默认文字<div class="animation">动画文字</div></a><i></i></li>
	</ul>
	<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
	<script>
		$(function(){
			$(".foot-bar li").click(function(){
				$(".foot-bar li.menu_active").removeClass("menu_active");
				$(".animation").hide();
				$(this).addClass("menu_active");
				$(".menu_active .animation").show();
			});
		})
	</script>
	</body>

</html>